<template>
  <view class="router-view container bcl-active">
    <view class="filter-list">
      <!-- 分类 -->
      <view class="mb-30">
        <view class="title fz-15 bold">分类</view>
        <view class="uni-label-list uni-label-list-auto mt-20">
          <view
            class="uni-label pointer pointer-filter bcl-white"
            :class="{ 'uni-label-selected': item.id == result.category }"
            v-for="(item, index) in filter.category"
            :key="index"
            @tap="changeCategory(item)"
          >
            <text class="hide-text-2">{{ item.name }}</text>
          </view>
        </view>
      </view>

      <!-- 地区限制 -->
      <view class="mb-30">
        <view class="title fz-15 bold">地区限制</view>
        <view class="uni-label-list uni-label-list-auto mt-20">
          <view
            class="uni-label pointer pointer-filter bcl-white"
            :class="{ 'uni-label-selected': item.id == result.province }"
            v-for="(item, index) in filter.province"
            :key="index"
            @tap="changeProvince(item)"
          >
            <text class="hide-text-2">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部栏 -->
    <view class="uni-footer box border border-top text-center bcl-white">
      <view class="box-1 pointer" @tap="clear">清空</view>
      <view class="box-1 bcl-main cl-white pointer pointer-filter" @tap="submit"
        >完成</view
      >
    </view>
  </view>
</template>

<script>
import { listFilter } from "@/apis/app";

export default {

  data() {
    return {
      filter: uni.getStorageSync("servicerFilter"),
      result: {
        category: "",
        province: "",
      },
    };
  },

  onLoad() {
    this.result = uni.getStorageSync("currentServicerFilter") || this.result; // 初始化筛选
    this.listFilter();
  },

  methods: {
    /*
     * 筛选列表
     */
    async listFilter() {
      if (this.filter) return false;

      let { code, data } = await listFilter({
        type: 3,
      });

      if (code == 200) {
        // 追加全部选项
        data.category.unshift({
          id: "",
          name: "全部",
        });

        data.province.unshift({
          id: "",
          name: "全部",
        });

        this.filter = data;
        uni.setStorageSync("servicerFilter", this.filter);
      }
    },

    /*
     * 筛选列表
     */
    submit() {
      uni.setStorageSync("currentServicerFilter", this.result);
      uni.navigateBack();
      setTimeout(() => {
        uni.$emit("reload");
      }, 0);
    },

    /*
     * 高亮已筛选
     */
    lightFilter() {
      this.filter.forEach((item) => {
        item.list.forEach((sitem) => {
          if (this.currentfilter.map((item) => item.name).includes(sitem.name))
            this.onLabelTap(sitem);
        });
      });
    },

    changeCategory(item) {
      this.result.category = item.id;
    },

    changeProvince(item) {
      this.result.province = item.id;
    },

    // 清空
    clear() {
      this.result = {
        category: "",
        province: "",
      };
    },

    onLabelTap(item) {
      if (typeof item.selected == "undefined") {
        this.$set(item, "selected", true);
      } else {
        item.selected = !item.selected;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  padding-bottom: 120upx;
}
</style>
